<template>
  <div class="model_container">
    <div class="search">
      <van-search
        v-model="pageParam.partNo"
        shape="round"
        background="#0089ff"
        placeholder="请输入搜索关键词"
        clearable
      />
      <div class="collect_box">
        <div
          class="collect_container"
          v-if="collectionList.length > 0 && searchFlag"
        >
          <div
            class="collect_item"
            v-for="(item, index) in collectionList"
            :key="index"
            @click="itemClick(item.partNo)"
          >
            <div>{{ item.partNo }}</div>
            <div>{{ item.brandName }}</div>
          </div>
        </div>
      </div>
      <div
        class="mask"
        v-if="collectionList.length > 0 && searchFlag"
        @click="searchFlag = false"
      ></div>
    </div>
    <div class="list_container" v-if="list.length > 0">
      <div class="tab_title">
        <div class="title_item" style="width: 35%">型号</div>
        <div class="title_item" style="width: 35%">品牌</div>
        <div class="title_item" style="width: 30%">数量</div>
      </div>
      <div class="tab_list" @scroll="scrollEventFn">
        <div class="tab_item" v-for="(item, index) in list" :key="index">
          <div class="li view" style="width: 35%" @click="getItem(item.id)">
            {{ item.partNo }}
          </div>
          <div class="li" style="width: 35%">{{ item.brandName }}</div>
          <div class="li" style="width: 30%">{{ item.stockQty }}</div>
        </div>
        <div class="tip">
          <van-loading v-if="loading" type="spinner" color="#1989fa" />
          <div v-if="noDataFlag">没有更多了</div>
        </div>
      </div>
    </div>
    <div class="list_container" v-else>
      <van-empty image="search" description="暂无数据" />
    </div>
  </div>
</template>

<script setup name="model">
import { ref } from "vue";
import { debounce, throttle } from "lodash";
import { GetModelList } from "@/api/model";
import { watch } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const collectionList = ref([]);
const searchFlag = ref(false);
const pageParam = ref({
  partNo: "",
  pageIndex: 1,
  pageSize: 20,
});
const list = ref([]);
const loading = ref(false);
const noDataFlag = ref(false);
watch(
  () => pageParam.value.partNo,
  (newValue, oldValue) => {
    if (!newValue) {
      setTimeout(() => {
        collectionList.value = [];
        list.value = [];
      }, 300);
      return;
    }
    pageParam.value.pageIndex = 1;
    collectionList.value = [];
    list.value = [];
    getList();
  }
);
//点击集合项
const itemClick = (value) => {
  pageParam.value.partNo = value;
};

//获取列表
const getList = throttle(async () => {
  if (!pageParam.value.partNo) {
    return;
  }
  noDataFlag.value = false;
  loading.value = true;
  const res = await GetModelList(pageParam.value);
  if (pageParam.value.pageIndex > 1) {
    collectionList.value = [];
  } else {
    collectionList.value = res.data.result.slice(0, 10);
  }
  if (collectionList.value.length > 1) {
    searchFlag.value = true;
  } else {
    searchFlag.value = false;
  }
  if (res.data.result.length < 20) {
    noDataFlag.value = true;
  }
  list.value = list.value.concat(res.data.result);
  loading.value = false;
}, 500);

//触底加载
const scrollEventFn = debounce((e) => {
  //e.srcElement.scrollTop: 滚动条距离页面顶部距离
  //e.srcElement.clientHeight: 滚动页面高度
  //e.srcElement.scrollHeight: 滚动条高度
  if (
    e.srcElement.scrollTop + e.srcElement.clientHeight >
    e.srcElement.scrollHeight - 20
  ) {
    console.log("触底了");
    loading.value = true;
    pageParam.value.pageIndex++;
    getList();
  }
}, 300);

//查看详情
const getItem = (val) => {
  localStorage.setItem("partNoId", val);
  router.push({ path: "/modelDetail" });
};
</script>
<style>
@import "../../assets/styles/index.scss";
</style>
<style lang="scss" scoped>
.model_container {
  width: 100%;
  height: 100%;
  background-color: #f7f8fa;
  position: relative;
  .search {
    .collect_box {
      width: 100%;
      position: relative;
      z-index: 99;
      .collect_container {
        width: 100%;
        max-height: 200px;
        box-shadow: 0 1px 3px #000;
        animation: fadeIn 0.5s ease;
        overflow: scroll;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        .collect_item {
          width: 100%;
          padding: 0.1rem 0.3rem;
          box-sizing: border-box;
          border-bottom: 1px solid #0089ff;
          font-size: 0.4rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          &:hover {
            background-color: #eee;
          }
        }
      }
      @keyframes fadeIn {
        from {
          height: 0;
        }
        to {
          height: 200px;
        }
      }
    }
    .mask {
      width: 100%;
      height: 100%;
      background-color: #000;
      position: absolute;
      opacity: 0.1;
    }
  }
  .list_container {
    width: 90%;
    height: 70vh;
    margin: 70px auto;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 1px 5px #000;
    border-radius: 5px;
    .tab_title {
      width: 100%;
      height: 5%;
      display: flex;
      justify-content: space-around;
      font-size: 0.4rem;
      font-weight: bold;
      .title_item {
        text-align: center;
      }
    }
    .tab_list {
      width: 100%;
      height: 95%;
      font-size: 0.4rem;
      overflow: scroll;

      .tab_item {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 10px 0;
        .li {
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .view {
          color: #0089ff;
          cursor: pointer;
        }
      }
      .tip {
        width: 100%;
        display: flex;
        justify-content: center;
        color: #bbb;
      }
    }
  }
}
</style>
